<script>
import AIChatBot from '@/components/AIChatBot/index.vue'

export default {
  name: 'App',
  components: {
    AIChatBot
  },
  computed: {
    currentTheme() {
      return this.$store.getters.currentTheme || 'light'
    }
  },
  created() {
    // 如果有token，确保用户信息和权限被加载
    const token = localStorage.getItem('Admin-Token')
    if (token) {
      // 先检查是否已有用户角色
      const hasRoles = this.$store.getters['user/roles'] && this.$store.getters['user/roles'].length > 0
      
      if (!hasRoles) {
        // 如果没有角色信息，重新获取
        this.$store.dispatch('user/getInfo')
      }
    }
  }
}
</script>

<template>
  <div id="app" :class="`theme-${currentTheme}`">
    <router-view />
    <!-- AI聊天机器人组件 -->
    <AIChatBot />
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#app {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}

/* 覆盖Element UI的默认样式 */
.el-main {
  padding: 0;
}

/* 自定义面包屑导航样式 */
.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}

.left-menu {
  a {
    &:hover {
      color: #409EFF;
      background: none;
    }
  }
}

/* 让卡片区域有一些内边距 */
.dashboard-container .el-row,
.role-container .filter-container,
.menu-container .filter-container {
  padding: 15px;
}

/* 强制覆盖系统信息区域的样式 */
[data-theme="dark"] .system-info-card .el-descriptions-item__cell,
[data-theme="dark"] .system-info-card .el-descriptions-item__label,
[data-theme="dark"] .system-info-card .el-descriptions-item__content {
  background-color: #2B2B2C !important;
  color: #CFD3DC !important;
  border-color: #4C4D4F !important;
}

[data-theme="dark"] .system-info-card .el-descriptions-item__label {
  background-color: #2B2B2C !important;
  color: #E5EAF3 !important;
}

/* 在小屏幕设备上允许滚动而不是固定最小宽度 */
@media screen and (max-width: 1024px) {
  #app {
    min-width: auto;
    overflow-x: auto;
  }
}

/* 移动设备优化 */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  /* 调整Element UI组件在移动端的一些样式 */
  .el-table {
    width: 100%;
  }
  
  .el-form-item {
    &__label {
      float: none;
    display: block;
      text-align: left;
      padding: 0 0 10px;
  }
  
    &__content {
      margin-left: 0;
    }
  }
}
</style>
